// import { useState,useCallback, useMemo } from "react";
import { useState, useCallback } from "react";
import Child1Com from "./UseCallbackChild";
const Parent = () => {
  // 案例1
  // const [count,setCount] = useState(0)
  // // const clickCount = ()=>{
  // //   setCount(val=>val+1)
  // //   // setCount(count+1)
  // // }

  // const clickCount = useCallback(()=>{
  //   console.log("父组件在更新状态count")
  //   setCount(count+1)
  // },[count])//要穿入一个依赖值

  // const fn1 = useMemo(()=>{//一般用于计算属性
  //   console.log('===');
  //   return count+1
  // },[count])
  // memo 需要和useCallback结合使用->父子之间如果没有依赖的情况，子组件不再重新渲染的问题
  // console.log(clickCount,fn1);

  // 案例2
  const [todoList, setToList] = useState([
    {
      title: '标题'
    }
  ])

  // 父组件内部的状态，非todoList
  const [name, setname] = useState(1)

  const updateName = () => {
    setname(name + 1)
  }

  const updateList = useCallback((msg) => {
    let nList = [...todoList]
    nList.push(msg)
    setToList(nList)
  }, [todoList])
  
  return (<>
  {/* 案例1 */}
    {/* 父组件
    count：{count}
    <button onClick={clickCount}>count++</button>
    <br />
    <Child1Com count={count} /> */}

     {/* 案例2 */}
     name:{name}<br />
     <button onClick={updateName}>更新name</button>
     渲染totoList
     {
       todoList.map((item, key) => <p key={key}>{item.title}</p>)
     }
     <Child1Com updateList={updateList} /> 
  </>);
}


// props->React.memo() // 用memo包裹起来的函数1.是一个有缓存的函数：
// 2. 会检测props的变化，如果props有更新就会重新渲染该组件，否则还读原来的数据；
export default Parent;